<div class="tech-doc-table" [busyIf]="primengTableHelper.isLoading">
    <div class="m-portlet" style="margin-top: -15px;">
        <div class="m-portlet__head" style="height: 50px; padding: 15px;">
            <div class="m-portlet__head-caption" style="width:100%">
                <div class="m-portlet__head-title">
                    <span class="m-portlet__head-icon">
                        <i class="fa fa-book"></i>
                    </span>
                    <h3 class="m-portlet__head-text">请选择工艺文件</h3>
                </div>
                <div
                    class="form-group m-form__group align-items-center mb-0 col-md-4"
                >
                    <div class="m-input-icon m-input-icon--right">
                        <input type="text" [(ngModel)]="filterText" (keyup.enter)="getCharges()" class="form-control m-input m-input--solid" placeholder="Search...">
                        <span class="m-input-icon__icon m-input-icon__icon--right">
                          <span (click)="getCharges()">
                            <i class="la la-search m--font-brand"></i>
                          </span>
                        </span>
                      </div>
                </div>
            </div>
        </div>
        <div style="padding: 15px;">
            <p-table
                [value]="techDocs"
                selectionMode="single"
                [(selection)]="selectedTechDoc"
                dataKey="codeId"
                [scrollable]="true"
                scrollHeight="200px"
                (onRowSelect)="rowSelect()"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 150px">编号</th>
                        <th style="width: 150px">编者</th>
                        <th style="width: 150px">时间</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData>
                    <tr [pSelectableRow]="rowData">
                        <td style="width: 150px">
                            {{ rowData.codeId }}
                        </td>
                        <td style="width: 150px">
                            {{ rowData.editor }}
                        </td>
                        <td style="width: 150px">
                            {{ rowData.editTime | momentFormat: 'YYYY-MM-DD' }}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>

    <div class="m-portlet" style="margin-top: -30px;">
        <div class="m-portlet__head" style="height: 50px; padding: 15px;">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <span class="m-portlet__head-icon">
                        <i class="fa fa-database"></i>
                    </span>
                    <h3 class="m-portlet__head-text">材料信息</h3>
                </div>
            </div>
        </div>
        <div style="padding: 15px;">
            <!-- <div *ngFor="let rm of techDocView.materials"> -->
            <p-table [value]="techDocView.materials">
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width:25%; height: 30px; text-align:center;">
                            图号
                        </th>
                        <th style="width:25%; text-align:center;">名称</th>
                        <th style="width:25%; text-align:center;">硬度</th>
                        <th style="width:25%; text-align:center;">备注</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData>
                    <tr>
                        <td style="text-align:center; height: 30px;">
                            {{ techDocView.drawingCode }}
                        </td>
                        <td style="text-align:center;">
                            {{ techDocView.drawingName }}
                        </td>
                        <th style="text-align:center;">
                            {{ rowData.hardness }}
                        </th>
                        <td style="text-align:center;">{{ rowData.remark }}</td>
                    </tr>
                </ng-template>
            </p-table>

            <p-table [value]="techDocView.materials">
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width:13%;text-align:center;">种类</th>
                        <th style="width:25%; text-align:center;">剖面尺寸</th>
                        <th style="width:13%; text-align:center;">长度</th>
                        <th style="width:13%; text-align:center;">数量</th>
                        <th style="width:18%; text-align:center;">
                            单件质量kg
                        </th>
                        <th style="width:18%; text-align:center;">
                            全套质量kg
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData>
                    <tr>
                        <td style="text-align:center;">
                            {{ rowData.category }}
                        </td>
                        <td style="text-align:center;">{{ rowData.size }}</td>
                        <td style="text-align:center;">{{ rowData.length }}</td>
                        <td style="text-align:center;">
                            {{ rowData.productAmount }}
                        </td>
                        <td style="text-align:center;">
                            {{ rowData.weightPerProduct }}
                        </td>
                        <td style="text-align:center;">{{ rowData.weight }}</td>
                    </tr>
                </ng-template>
            </p-table>
            <!-- </div> -->
        </div>
    </div>

    <div class="m-portlet" style="margin: -30px 0px 0px 0px;">
        <div class="m-portlet__head" style="height: 50px; padding: 15px;">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <span class="m-portlet__head-icon">
                        <i class="fa fa-cubes"></i>
                    </span>
                    <h3 class="m-portlet__head-text">
                        工序
                        <small style="float: right;"> 额定工时 </small>
                    </h3>
                </div>
            </div>
        </div>
        <div class="m-portlet__body" style="padding: 15px;">
            <div class="m-widget4 m-widget4--chart-bottom row">
                <div
                    class="m-widget4__item col-4"
                    *ngFor="let proc of techDocView.procs"
                >
                    <div class="m-widget4__img" style="width: 25px;">
                        <i
                            class="fa fa-angle-right blod m--font-success"
                            style="font-size: 18px;"
                            >{{ proc.sequenceNumber }}</i
                        >
                    </div>
                    <div class="m-widget4__info" style="width: 60%;">
                        <span class="m-widget4__text">
                            <div class="blod" style="font-size: 16px;">
                                {{ proc.name }}
                            </div>
                        </span>
                    </div>
                    <span class="m-widget4__img">
                        <span class="m-widget4__text"
                            >{{ proc.chunk }} 小时
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <div class="m-portlet__foot">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <button
                        type="button"
                        class="btn btn-sm btn-success float-right"
                        (click)="save()"
                        [disabled]="!selectedTechDoc?.codeId"
                        [buttonBusy]="saving"
                        [busyText]="'绑定中...'"
                    >
                        <i class="fa fa-check-circle"></i>
                        <span>绑定工艺规程</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
